<!--suppress ALL -->
<template>
  <div>
    <div id="mainConBox" v-show="mainConState">
      <Header></Header>
      <!--场地详情开始-->
      <!--场地详情开始-->
      <div class="detailBox w1200 bc ">
        <!--详情顶部-->
        <div class="detailTop  bg100  mt20  clearfix">
          <!--左图片部分-->
          <div class="prcWrap w630 h420 overflow fl pr">
            <div class="mainImgShow" :style="showImgUrl">

            </div>
            <div class=" samllImg clearfix">
              <a class="abs-left w15 h30 mt-15 fun" fun="left" @click="changeListPic">
                <img src="static/images/prev.png" fun="left"/>
              </a>
              <a class="abs-left w15 h30 mt-15 fun" style="margin-left:615px;" @click="changeListPic" fun="right">
                <img src="static/images/next.png" fun="right"/>
              </a>
              <div id="samllImglist">
                <div v-for="item in listSummaryImage" class="imgListBottom">
                  <img class="fl mr10" :data-src="item['fileName']+'?x-oss-process=image/resize,m_fill,h_320,w_630'" :src="item['fileName']+'?x-oss-process=image/resize,m_fill,h_90,w_150'" @click="changeImg"/>
                </div>
              </div>
            </div>
          </div><!--图片部分结束-->
          <div class="txtWrap w520 mr20 fr">
            <dl class="mt10 fm_yahei  f14 lh32">
              <dt class="bb87_dot lh60 clearfix"><b class="f20 fb  c20">{{placeName}}</b><span class="c60 fn fr"></span>
              </dt>
              <dd class="mt25 clearfix ">
                <span class="fl w80 typeTit">类型：</span>
                <span class="c40 typeName">{{(placeTypeName==null)?" ":placeTypeName.replace(/,/g,"、")}}</span>
              </dd>
              <dd class="mt25 clearfix ">
                <span class="fl w80 typeTit">兴趣点：</span>
                <span class="c40 typeName">{{(placeTagName==null)?" ":placeTagName.replace(/,/g,"、")}}</span>
              </dd>
              <dd class="mt25 clearfix">
                <span class="fl w80 typeTit">难易度：</span>
                <div class="grayStarBox">
                  <i v-for="(i,index) in 5" class="grayStar" :class="{redStar:difficulty>index}"></i>
                </div>
              </dd>
              <dd class="mt25 clearfix">
                <span class="fl w80 typeTit">场地地址：</span>
                <span class="fl c40">{{province+'•'+city+'•'+region}}</span>
                <span class="c60 fr locationBg"><i class="inline-block w15"></i>{{'距离'+ distance+'km'}}</span>
              </dd>
              <dd class="mt25">
                <button @click="FollowPlace()" :class="followStatus === 0?'pt10 pb10 pr15 c40 bg100 favoriteBtnBg pointer':'pt10 pb10 pr15 c40 bg100 favoriteBtnBgVtd pointer'"><i
                  class="w20 inline-block"></i>收藏场地
                </button>
                <button @click="downApp()" class="pt10 pb10 pr15 c40 bg100 shareBtnBg pointer"><i
                  class="w20 inline-block"></i>分享场地
                </button>
              </dd>
            </dl>
          </div><!--文字部分结束-->
        </div>
        <!--详情顶部结束-->
        <div class="w1180 bc bg100 pt15 pb20 pl20 pr20 mt20">
          <h1 class="bb_grn_2 h38 pr">
            <i class="mr5 vm square-grn"></i>
            <b class="f18  fm-yahei lh100 vm c_grn_119c5b">场地详情</b>
            <i i class="ml5 vm square-grn"></i>
          </h1>
          <div class="clearfix mt20 summary">
            <div v-if="summary===null||summary===''" ref="jsonDetail">
            </div>
            <pre v-else>{{summary}}</pre>
          </div>
        </div>
        <!--精彩瞬间-->
        <div class="w1180 bc bg100 pt15 pb20 pl20 pr20 mt20">
          <h1 class="bb_grn_2 h38 pr">
            <i class="mr5 vm square-grn"></i>
            <b class="f18  fm-yahei lh100 vm c_grn_119c5b">精彩瞬间</b>
            <i i class="ml5 vm square-grn"></i>
            <button @click="downApp()"
                    class="abs-right hoverborder_grn pointer mt-15 f12 c60 lh150 b87 br10 pl10 pr10 bg100">换一批
            </button>
          </h1>
          <ul class="clearfix mt20">
            <li v-if="data01.length===0">
              <p style="text-align: center;line-height:150px;">暂无精彩瞬间</p>
            </li>
            <li v-else class="fl mr10 pr w224 h138 SpecialLi" v-for="(item,index) in data01" @click="showWView(data01,index)">
              <img class="bg84" :src="item.flag==1?item.fileName+'?x-oss-process=image/resize,m_fill,h_138,w_224':item.thumFileName+'?x-oss-process=image/resize,m_fill,h_138,w_224'"/>
              <p class="abs-left-bottom w c100 f12 lh200 ti10 bg0-alpha40 ">{{limitworld(item.description,15,"...")}}</p>
              <p class="playBtn" v-if="item.flag==2"></p>
            </li>
          </ul>
        </div>
        <!--精彩瞬间结束-->
        <!--详情tab标签 nav-->
        <div class="w1200 bc h38 bg100 mt20">
          <ul class="clearfix fm_songti">
            <li class="fl br_ddd "><a class="curbg_grn fl f14 w120 h38 c20 lh38 tc">详情介绍</a></li>
            <li class="fl br_ddd "><a class="fl f14 w120 h38 c20 lh38 tc" href="#userRating">用户评价</a></li>
            <li @click="downApp()" class="fl br_ddd"><a class="fl f14 w120 h38 c20 lh38 tc">附近设施</a></li>
          </ul>
        </div>
        <!--详情tab标签结束-->
        <!--详情介绍-->
        <div class="w1180 bc bg100 pt15 pb20 pl20 pr20 mt20">
          <!--经典线路-->
          <div class="lineWrap">
            <h1 class="bb_grn_2 h38 mt20">
              <i class="mr5 vm square-grn"></i>
              <b class="f18 fm-yahei lh100 vm c_grn_119c5b">经典线路</b>
              <i i class="ml5 vm square-grn"></i>
            </h1>

            <div class="mt30" v-for="(list,index) in data003">
              <h3 class="lineTit">
                <em class="inline-block br14 fm-yahei f14 h28 lh28  b_grn_119c5b c_grn_119c5b bg100 pr15 pl15 ">线路{{index+1}}</em>
                <span class="fm-yahei f16 c7 lh28 ml10 inline-block">{{list.description}}</span>
              </h3>
              <!--线路八的图-->
              <div class="mt20 clearfix">
                <!--第一张-->
                <div v-for="(item,index) in list.resourceInfoList" class="fl pr bg84 mr5 w248 h400 sesourceList"  @click="showWView(list.resourceInfoList,index)">
                  <img :src="item.flag==1?item.fileName+'?x-oss-process=image/resize,m_fill,h_138,w_224':item.thumFileName+'?x-oss-process=image/resize,m_fill,h_138,w_224'" alt=""/>
                  <p class="abs-left-bottom w c100 f12 lh200 ti10 bg0-alpha40 ">{{item.description}}</p>
                  <p v-if="item.flag==2" class="playBtn pointer"></p>
                </div>
                <!--第二  -->
                <!--<div class="fl w526 h400 mr5">
                                  <div class="fl pr bg84 w526 h400">
                                      <img class="fl"  src="#" alt="第二张" width="526" height="400" />
                                      <p class="abs-left-bottom w c100 f12 lh200 ti10 bg0-alpha40 ">世界那么大你不去看看吗</p>
                                  </div>
                              </div>-->
              </div><!--线路八 图结束-->
            </div><!--线路八结束-->
          </div><!--经典线路 lineWrap结束-->
          <!--场地入口-->
          <div class="enterWrap">
            <h1 class="bb_grn_2 h38 mt40">
              <i class="mr5 vm square-grn"></i>
              <b class="f18 fm-yahei lh100 vm c_grn_119c5b">场地入口</b>
              <i i class="ml5 vm square-grn"></i>
            </h1>
            <!--地图-->
            <div class="b87 clearfix mt30">
              <div class="w938 br_ddd fl mapBox">
                <div id="container" class="copy" style="width:938px; height:320px;">

                </div>
                <div id="userLocation" style="width:0;height:0;display: none;"></div>
                <ul class="clearfix mt10">
                  <li v-for="(item, index) in entryResourceInfoList" class="fl mr10">
                    <img :src="item.flag==1?item.fileName:item.thumFileName" width="194" height="120"/>
                  </li>
                  <!--<li class="fl mr10"><img src="images/map-img2.png" width="194" height="120"/></li>
                                    <li class="fl mr10"><img src="images/map-img3.png" width="194" height="120"/></li>
                                    <li class="fl "><img src="images/map-img3.png" width="194" height="120"/></li>-->
                </ul>
              </div>
              <div class="w198 fr entryBox" id="EntryBox">
                <div v-for="(list,index) in data_" class="mt30">
                  <h1 class="inline-block  bg30 h24 f12 fm_yahei  lh24 pl20 pr20 c100 pointer hoverbg_grn" :lng = "list['lng']" :lat = "list['lat']" :index="index" @click="changeEntry">
                    {{list.entryName}}</h1>
                  <p class="f14 mt10 fm_yahei c40">{{list.address}}</p>
                </div>
              </div>
            </div>
            <!--地图结束-->
          </div><!--场地入口 enterSWrpa结束-->
          <!--向导-->
          <div class="guideWrap">
            <h1 class="bb_grn_2 h38 mt40">
              <i class="mr5 vm square-grn"></i>
              <b class="f18 fm-yahei lh100 vm c_grn_119c5b">向导</b>
              <i i class="ml5 vm square-grn"></i>
            </h1>
            <!--向导item-->
            <ul class="clearfix mt30 c20 f14 fm-yahei lh180">
              <li v-if="data02.length===0">
                <p style="text-align: center;line-height:150px;">暂无向导信息</p>
              </li>
              <li v-else v-for="item in data02" class="guideList">
                <p>{{item.guideName}}</p>
                <p>{{item.moblile}}</p>
                <p :class="item.costAmount==0?'c_grn_119c5b':'c_org_ff991d'">
                  {{item.costAmount==0?'免费':item.costAmount+'元/天'}}</p>
              </li>
            </ul>
          </div><!--向导guideWrap结束-->
          <!--评论-->
          <div id="userRating" class="commentWrap mt40 clearfix pb50">
            <!--评论(左)-->
            <comment @loading="getComments" @getOver="getOver" my-main-score="true" my-diff="true" :my-urls="urls" :my-req-data="reqData" :my-thumb-data="thumbData" my-thumb-key="placeID" my-pic-list-key="listPlacecommentresourceInfo"></comment>
            <!--[热门活动+热门请圈子](右)--->
            <div class="comentsRight w198 fr">
              <!--热门活动-->
              <div class="acts c100 fm_songti f12 pb15">
                <h1 class="w h28 lh28   tl ti10 bg_pink_e15671">热门活动</h1>
                <ul>
                  <li class="mt10 activityNearBylist" :activityId="item['id']" @click="gotoOther"
                      v-for='item in listActivity' :style="item['imgUrl']">
                    <div class="activityInfo" :activityId="item['id']">
                      <p :activityId="item['id']"># {{limitworld(item['name'],5,"...")}} #</p>
                      <p class="time" :activityId="item['id']">{{item['time']}}</p>
                    </div>
                  </li>
                </ul>
              </div>
              <!--热门圈子-->
              <div class="acts fm_songti f12 mt50 pb15 ">
                <h1 class="w h28 lh28 c100  tl ti10 bg_org_e0613a">热门圈子</h1>
                <ul class="b87 pr10 pl10 pb40 f12 pointer">
                  <li v-for="item in listGroup" class="clearfix mt15 bb87 pb10">
                    <img class="fl w40" :src="item.imgUrl" width="40" height="40"/>
                    <dl class="fr w130 c40 hoverfont_unl">
                      <dt class="clearfix"><b class="c_grn_119c5b circleName">{{item.groupName}}</b><span
                        class="c60 fr">{{item.userCount}}人</span>
                      </dt>
                      <dd class="mt10"><p class="c60 lh150 circleDes">{{limitworld(item.introduce,30,"...")}}</p></dd>
                    </dl>
                  </li>
                </ul>
              </div>
            </div><!--comentsRight结束-->
          </div><!--comentsWrap结束-->
        </div><!--详情介绍结束-->
      </div><!--detailBox结束-->
      <Footer></Footer>
    </div>
    <Loading v-show="loadState"></Loading>
    <div id="wviewBox" v-if="viewBoxState">
      <wview :imgLists = "wviewImages" :Index="wViewIndex" @closeView="closeView"></wview>
    </div>
  </div>
</template>
<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import axios from "../../../config/http";
  import Loading from '../../components/loading';
  import Animate from '../../assets/animate';
  import AMap from "AMap";
  import wview from "../../components/wview";
  import comment from "../../components/comments";
  import Utils from '../../assets/Util'
  var lng, lat, address_, distance;
  export default {
    components: {
      Header,
      Footer,
      Loading,
      wview,
      comment
    },
    data() {
      return {
        _id: '',
        userID: '',
        placeName: '',
        followStatus:0,
   			lng:'',
   			lat:'',
        difficulty: '',
        placeTypeName: '',
        placeTagName:"",
        province: '',
        city: '',
        region: '',
        address: '',
        summary: '',
        jsonDescription:'',
        isHas: true,
        listGroup: '',
        listActivity: [],
        total: '',
        distance: '',
        // 精彩瞬间
        listSpecialDisplay: '',
        activityNearBylist: [],
        data01: [],
        data02: [],
        data03: [],
        data003: [],
        data_: [],
        entryResourceInfoList:[],
        pageNumber: 1,
        data04: [],
        Oneclick: 0,
        actived: true,
        iSee: false,
        showImgUrl: "",
        listSummaryImage: [],
        loadState: true,
        mainConState: false,
        viewBoxState:false,
        wviewImages:[],
        wViewIndex:1,
        urls:{
          commentUrl:"/Placecomment/GetList",
          thumbUrl : "/Placecomment/Praise",
          subCommentUrl: "/Placecomment/add"
        },
        reqData:{
          "placeID": this.$route.query.id,
          "userID": localStorage.getItem("uId"),
          "pageIndex": 0,
          "pageSize": 15,
          "clientType":'pc'
        },
        thumbData:{
          "userID": localStorage.getItem("uId"),
          "commentID": 0,
          "token": localStorage.getItem("token"),
          "type": 0,
          "placeID": this.$route.query.id
        }
      }
    },
    mounted() {
      this._id = this.$route.query.id;
      this.userID = localStorage.getItem('uId');
      this.$nextTick(
        this.getAxios()
      );
    },
    methods: {
      // 评论翻页动画
      getComments() {
        this.loadState = true;
      },
      getOver(){
        this.loadState = false;
      },
      // 跳转下载App界面
      downApp() {
        this.$router.push({
          path: '/appDownload'
        })
      },
      // 跳转其他的活动
      gotoOther: function (e) {
        var id = e.target.getAttribute("activityId");
        this.$router.push({
          path: '/activityDetail',
          query: {
            id: id
          }
        })
      },
      // 改变图片
      changeImg: function (e) {
        var imgUrl = e.target.getAttribute("data-src");
        this.showImgUrl = "background-image:url('" + imgUrl + "')";
      },
      // 改变列表长度
      changeListPic: function (e) {
        var fun = e.target.getAttribute("fun");
        var oSmallImgList = document.getElementById("samllImglist");
        var animate = new Animate(oSmallImgList, fun, 160);
        animate.todo();
      },
      jsonToHtml(json){
        let array = JSON.parse(json);
        this.$refs.jsonDetail.appendChild(this.getText(array));
      },
      getText(argument) {
        let DivEle = document.createElement("div");
        for (let i = 0; i < argument.length; i++) {
          let Item = argument[i];
          if (i>=1 && Item['title'] =="\n" && argument[i-1]['title'] != "\n"){
            let brNode = document.createElement("br");
            DivEle.appendChild(brNode);
          }
          if (Item['title'] && Item['title'] !=='\n'){
            let pEle = document.createElement("p");
            let textNode = document.createTextNode(Item['title']);
            pEle.appendChild(textNode);
            if(Item['bold'] === 1){
              pEle.style.fontWeight = "bold";
            }
            if(Item['font'] === 1){
              pEle.style.fontSize = Item['font']+"px";
            }
            if(Item['obliq'] === 1){
              pEle.style.fontStyle = "oblique";
            }
            if(Item['underline'] === 1){
              pEle.style.textDecoration = "underline";
            }
            if(Item['color']){
              pEle.style.color = Item['color'];
            }
            pEle.style.lineHeight = '30px';
            pEle.style.display = 'inline';
            DivEle.appendChild(pEle);
          }
          if(Item['img']){
            let ImgEle = document.createElement("img");
            ImgEle.setAttribute("src", Item['img']);
            ImgEle.style.maxWidth = "100%";
            ImgEle.style.display = "block";
            ImgEle.style.margin = 0;
            ImgEle.style.padding = 0;
            DivEle.appendChild(ImgEle);
          }
          if(Item['locImg']){
            let ImgEle = document.createElement("img");
            let imgSrc = 'static/images/rich_image_'+Item["locImg"]+'@2x.png';
            ImgEle.setAttribute("src", imgSrc);
            ImgEle.style.width = '100px';
            ImgEle.style.height= '20px';
            DivEle.appendChild(ImgEle);
          }
        }
        return DivEle;
      },
      // 限制显示字数
      limitworld: function (worlds, wordlength, mark) {
        if (worlds == null || worlds === ""){
            return "";
        }else{
          var nowLength = worlds.length;
          var newWorlds = "";
          if (nowLength > wordlength) {
            newWorlds = worlds.substr(0, wordlength) + mark;
          } else {
            newWorlds = worlds;
          }
          return newWorlds;
        }
      },
      computeDistance(startCoords, destCoords){
        var startLatRads = this.degreesToRadians(startCoords.latitude);
        var startLoingRads = this.degreesToRadians(startCoords.longitude);
        var destLatRads = this.degreesToRadians(destCoords.latitude);
        var destLongRads = this.degreesToRadians(destCoords.longitude);
        var Radius = 6371; // radius of the Earth in km
        var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLoingRads - destLongRads)) * Radius;
        return distance;
      },
      degreesToRadians(degrees){
        var radians = (degrees * Math.PI) / 180;
        return radians;
      },
      initMap(lat, lng){
        var startCoords = {
          latitude: localStorage.getItem("lat"),
          longitude:localStorage.getItem("lng")
        };
        var destCoords = {
          latitude: lat,
          longitude:lng
        };
        var km = this.computeDistance(startCoords, destCoords);
        return Math.floor(km);
      },
      changeEntry(e){
        var lng = e.target.getAttribute("lng");
        var lat = e.target.getAttribute("lat");
        let index = e.target.getAttribute("index");
        this.entryResourceInfoList = this.data_[index]['resourceInfoList'];
        this.lng = lng;
        this.lat = lat;
        this.makeMap();
      },
      // 查看大图
      showWView(lastImgLists, index){
        this.wViewIndex = index;
        this.wviewImages = lastImgLists;
        this.viewBoxState = true;
      },
      // 关闭大图显示
      closeView(){
        this.viewBoxState = false;
      },
      // 创建地图
      makeMap(){
        // 地图开始
        let that = this;
        var map = new AMap.Map('container', {
          center: [that.lng, that.lat],
          resizeEnable: true,
          zoom: 15
        });
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          map.addControl(new AMap.ToolBar());
          map.addControl(new AMap.Scale());
        });
        var icon = new AMap.Icon({
          size: new AMap.Size(18, 41), // 图标尺寸
          image: 'static/images/map_local_current.png', // Icon的图像
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(18, 41) // 根据所设置的大小拉伸或压缩图片
        });
        var marker = new AMap.Marker({
          position: new AMap.LngLat(that.lng, that.lat),
          offset: new AMap.Pixel(-10, -10),
          icon:icon,
          title: this.placeName
        });
        map.add(marker);
      },
      getAxios() {
        // 请求详情
        axios({
          method: 'post',
          url: "/Place/GetDetails",
          headers: {
            'client': 'pc'
          },
          data: {"id": this._id, "userID": this.userID}
        }).then(res => {
          if (res.data.code !== 1) {
            alert(res.data.message);
            return;
          }
          this.loadState = false;
          this.mainConState = true;
          let data = res.data.data
          lng = data.lng
          lat = data.lat
          this.distance = this.initMap(lat, lng);
          this.center = [data.lng, data.lat];
          this.lng = data.lng;
          this.lat = data.lat;
          let num = 0
          this.placeName = data.placeName
          this.placeTagName = data.placeTagName
          this.difficulty = data.difficulty
          this.province = data.province
          this.city = data.city
          this.region = data.region
          this.placeTypeName = data.placeTypeName
          this.jsonDescription = data.jsonDescription
          this.address = (data.address) ? data.address : ""
          this.summary = data.summary
          this.listGroup = data.listGroup
          this.listSummaryImage = data.listSummaryImage
          this.followStatus = data.followStatus
          this.showImgUrl = "background-image:url('" + this.listSummaryImage[0]['fileName'] + "')";
          if(data.jsonDescription){
            this.jsonToHtml(data.jsonDescription);
          }
          for (var i = 0, j = data.listActivity.length; i < j; i++) {
            var oActivityData = {};
            oActivityData.id = data.listActivity[i]["id"];
            oActivityData.imgUrl = "background-image:url(" + data.listActivity[i]['coverImgUrl'] + ")";
            oActivityData.name = (data.listActivity[i]['summarize'] == null) ? data.listActivity[i]['activityName'] : data.listActivity[i]['summarize'];
            oActivityData.time = this.limitworld(data.listActivity[i]['startTime'], 10, "") + "--" + this.limitworld(data.listActivity[i]['endTime'], 10, "");
            this.listActivity.push(oActivityData);
          }
          this.makeMap();
        });
        // 精彩瞬间
        axios({
          method: 'post',
          url: "/Place/GetSpecialDispalceList",
          headers: {
            'client': 'pc'
          },
          data: {
            "placeID": this._id,
            "pageSize": 5,
            "pageIndex": 0
          }
        }).then(res => {
          this.data01 = res.data.data
        })
        // 经典线路
        axios({
          method: 'post',
          url: "/Place/GetRouteList",
          headers: {
            'client': 'pc'
          },
          data: {
            "placeID": this._id
          }
        }).then(res => {
          this.data003 = res.data.data
        })
        // 向导
        axios({
          method: 'post',
          url: "/Place/GetGuideList",
          headers: {
            'client': 'pc'
          },
          data: {
            "placeID": this._id
          }
        }).then(res => {
          this.data02 = res.data.data
//						console.log(this.data02)
        })
        // 场地入口
        axios({
          method: 'post',
          url: "/Place/GetEntryList",
          headers: {
            'client': 'pc'
          },
          data: {
            "placeID": this._id
          }
        }).then(res => {
          this.data_ = res.data.data
          this.entryResourceInfoList = res.data.data[0]["resourceInfoList"]
//						console.log(this.data_.resourceInfoList )
        })

      },
      // 场地收藏
      FollowPlace(){
        let that = this;
        let Props = {
          url:"/Place/AddFollow",
          data:{
            "placeID": this.$route.query.id,
            "token": localStorage.getItem('token'),
            "userID": localStorage.getItem('uId'),
            "disabled": this.followStatus === 0 ? 1 : 0
          },
          sCallBack:res => {
            if(res.data.code === 1){
                this.followStatus = Math.abs(this.followStatus-1);
                let msg = this.followStatus === 1 ? '收藏成功' : '已取消';
                this.$message.success(msg);
            }else if(res.data.code === 4){
                that.refreshToken(that.FollowPlace);
            }else{
              this.$message.error("收藏失败，稍后再试");
            }
          },
          eCallBack:err => {
            console.log(err);
          }
        }
        Utils.myRequest(Props);
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      }
    }
  }
</script>
<style lang="less" scoped>
  .mainImgShow {
    width: 630px;
    height: 320px;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
  }

  .imgListBottom {
    width: 150px;
    height: 90px;
    overflow: hidden;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    float: left;
  }

  .imgListBottom img {
    width: 100%;
    min-height: 100%;
  }

  #samllImglist {
    position: absolute;
  }

  .fun {
    cursor: pointer;
    z-index: 999;
  }

  .SpecialLi {
    overflow: hidden;
  }

  .SpecialLi:nth-child(5) {
    margin-right: 0;
  }

  .activityNearBylist {
    width: 198px;
    height: 168px;
    overflow: hidden;
    text-align: center;
    background: #eee;
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center;
    cursor: pointer;
  }

  .sesourceList {
    overflow: hidden;
    text-align: center;
    height:138px !important;
    width: 228px;
    margin-bottom:5px;
  }

  .sesourceList:nth-child(5) {
    margin-right: 0px;
  }

  .sesourceList img {
    vertical-align: middle;
  }

  .guideList {
    border: 1px solid #ddd;
    padding: 20px;
    line-height: 35px !important;
  }

  .guideList p {
    display: inline-block;
  }

  .guideList p:nth-child(1) {
    width: 100px;
  }

  .guideList p:last-child {
    float: right;
  }

  .typeTit {
    text-align: left;
  }

  .circleDes {
    text-align: justify;
  }

  .circleName {
    float: left;
  }

  .activityNearBylist {
    position: relative;
  }

  .activityNearBylist .time {
    font-size: 12px;
    margin-top: 40px;
  }

  .activityInfo {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    padding-top: 40px;
  }
  .lineTit{
    text-align: left;
  }
  .entryBox{
    text-align: left;
    height: 450px;
    overflow-x:hidden;
    overflow-y:auto;
    padding-bottom:20px;
    scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
    scrollbar-highlight-color:#fff; /*- 左二 -*/
    scrollbar-face-color:#E4E4E4; /*- 面子 -*/
    scrollbar-arrow-color:#666; /*- 箭头 -*/
    scrollbar-shadow-color:#808080; /*- 右二 -*/
    scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
    scrollbar-base-color:#D7DCE0; /*- 基色 -*/
    scrollbar-track-color:#eee;/*- 滑道 -*/
  }
  .entryBox h1{
    cursor:pointer;
  }
  .mapBox{
    position: relative;
  }
  .typeName{
    float:left;
  }
  .grayStarBox{
    float:left;
  }
  #wviewBox{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index: 9999;
  }
  .summary pre{
    display: block;
    font-family: "Microsoft YaHei";
    margin: 1em 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height:25px;
    font-size:14px;
  }
</style>
